<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <link rel="stylesheet" href="./css/base.css">
</head>
<body>
    <div class="main clearfix">
        <div class="main-left fl">
            <div class="main-left-title">
                <img src="./images/index_01.jpg" alt="" width="100%">
            </div>
            <ul class="main-left-menu">
                <li><a href="detail.html" style="color: #000;text-decoration: none">奇趣事</a></li>
                <li>潮科技</li>
                <li><a href="list.html" style="color: #000;text-decoration: none">会生活</a></li>
                <li>美奇迹</li>
            </ul>
            <div class="search">
                <input type="text" class="input-text" placeholder="请输入关键字">
                <div class="btn">搜索</div>
            </div>
        </div>
        <div class="main-mid fl">
            <div class="slider">
                <ul class="clearfix">
                    <li class="fl">
                        <img src="./images/slide_1.jpg" alt="">
                    </li>
                    <li class="fl">
                        <img src="./images/slide_2.jpg" alt="">
                    </li>
                    <li class="fl">
                        <img src="./images/slide_1.jpg" alt="">
                    </li>
                </ul>
                <div class="control">
                    <span style="display: inline-block">XUI主题演示</span>
                    <ol class="clearfix" style="display: inline-block">
                        <li class="active"></li>
                        <li></li>
                    </ol>
                </div>
            </div>
            <div class="follow-wrap">
                <h3>焦点关注</h3>
                <div class="follow">
                    <div class="left">
                        <img src="./images/hots_1.jpg" alt="">
                    </div>
                    <div class="right">
                        <div class="box">
                            <img src="./images/hots_2.jpg" alt="">
                        </div>
                        <div class="box">
                            <img src="./images/hots_3.jpg" alt="">
                        </div>
                        <div class="box">
                            <img src="./images/hots_4.jpg" alt="">
                        </div>
                        <div class="box">
                            <img src="./images/hots_5.jpg" alt="">
                        </div>
                    </div>
                </div>
            </div>
            <div class="rank-wrap">
                <h3>一周热门排行</h3>
                <ul class="rank">
                    <li class="clearfix">
                        <span class="fl"><i class="red">1</i>你敢骑吗?全球第一辆全功能3D打印摩托车亮相</span>
                        <span class="fr num">阅读（18206） 赞（964）</span>
                    </li>
                    <li class="clearfix">
                        <span class="fl"><i class="green">2</i>你敢骑吗?全球第一辆全功能3D打印摩托车亮相</span>
                        <span class="fr num">阅读（18206） 赞（964）</span>
                    </li>
                    <li class="clearfix">
                        <span class="fl"><i class="blue">3</i>你敢骑吗?全球第一辆全功能3D打印摩托车亮相</span>
                        <span class="fr num">阅读（18206） 赞（964）</span>
                    </li>
                    <li class="clearfix">
                        <span class="fl"><i class="gray">4</i>你敢骑吗?全球第一辆全功能3D打印摩托车亮相</span>
                        <span class="fr num">阅读（18206） 赞（964）</span>
                    </li>
                    <li class="clearfix">
                        <span class="fl"><i class="gray">5</i>你敢骑吗?全球第一辆全功能3D打印摩托车亮相</span>
                        <span class="fr num">阅读（18206） 赞（964）</span>
                    </li>
                </ul>
            </div>
            <div class="recommend-wrap">
                <h3 style="margin-top: 15px;margin-left: 15px;">热门推荐</h3>
                <ul class="recommend">
                    <li>
                        <div class="img">
                            <img src="./images/hots_2.jpg" alt="" style="height: 150px">
                        </div>
                        <p>星球大战：原力觉醒视频演示  电影票68</p>
                    </li>
                    <li>
                        <div class="img">
                            <img src="./images/hots_3.jpg" alt="" style="height: 150px">
                        </div>
                        <p>星球大战：原力觉醒视频演示  电影票68</p>
                    </li>
                    <li>
                        <div class="img">
                            <img src="./images/hots_4.jpg" alt="" style="height: 150px">
                        </div>
                        <p>星球大战：原力觉醒视频演示  电影票68</p>
                    </li>
                    <li>
                        <div class="img">
                            <img src="./images/hots_5.jpg" alt="" style="height: 150px">
                        </div>
                        <p>星球大战：原力觉醒视频演示  电影票68</p>
                    </li>
                </ul>
            </div>
            <div class="hot-wrap">
                <h3 style="margin-left: 15px;margin-top: 15px;">最新发布</h3>
                <ul class="img-text-list">
                    <li class="clearfix" style="border-bottom: 1px solid #f0f0f0;margin: 0 10px;padding-top: 15px;padding-bottom: 30px">
                        <div class="text fl">
                            <p class="title"><i></i>星球大战：原力觉醒视频演示  电影票68</p>
                            <p class="num">admin发布于2015-06-29</p>
                            <p class="desc" style="color: #878787">星球大战原力觉醒：《星球大战原力觉醒》中国首映盛典红毯，星球大战原力觉醒：《星球大战原力觉醒》中国首映盛典红毯，星球大战原力觉醒：《星球大战原力觉醒》中国首映盛典红毯，星球大战原力觉醒：《星球大战原力觉醒》中国首映盛典红毯，星球大战原力觉醒：《星球大战原力觉醒》中国首映盛典红毯，星球大战原力觉醒：《星球大战原力觉醒》中国首映盛典红毯</p>
                            <p class="num">阅读（3406） 评论  <i class="good"></i>赞（167） 分类：星球大战</p>
                        </div>
                        <img src="./images/hots_2.jpg" alt="" class="fr" style="width: 150px">
                    </li>
                    <li class="clearfix" style="border-bottom: 1px solid #f0f0f0;margin: 0 10px;padding-top: 15px;padding-bottom: 30px">
                        <div class="text fl">
                            <p class="title"><i></i>星球大战：原力觉醒视频演示  电影票68</p>
                            <p class="num">admin发布于2015-06-29</p>
                            <p class="desc" style="color: #878787">星球大战原力觉醒：《星球大战原力觉醒》中国首映盛典红毯，星球大战原力觉醒：《星球大战原力觉醒》中国首映盛典红毯，星球大战原力觉醒：《星球大战原力觉醒》中国首映盛典红毯，星球大战原力觉醒：《星球大战原力觉醒》中国首映盛典红毯，星球大战原力觉醒：《星球大战原力觉醒》中国首映盛典红毯，星球大战原力觉醒：《星球大战原力觉醒》中国首映盛典红毯</p>
                            <p class="num">阅读（3406） 评论  <i class="good"></i>赞（167） 分类：星球大战</p>
                        </div>
                        <img src="./images/hots_2.jpg" alt="" class="fr" style="width: 150px">
                    </li>
                    <li class="clearfix" style="border-bottom: 1px solid #f0f0f0;margin: 0 10px;padding-top: 15px;padding-bottom: 30px">
                        <div class="text fl">
                            <p class="title"><i></i>星球大战：原力觉醒视频演示  电影票68</p>
                            <p class="num">admin发布于2015-06-29</p>
                            <p class="desc" style="color: #878787">星球大战原力觉醒：《星球大战原力觉醒》中国首映盛典红毯，星球大战原力觉醒：《星球大战原力觉醒》中国首映盛典红毯，星球大战原力觉醒：《星球大战原力觉醒》中国首映盛典红毯，星球大战原力觉醒：《星球大战原力觉醒》中国首映盛典红毯，星球大战原力觉醒：《星球大战原力觉醒》中国首映盛典红毯，星球大战原力觉醒：《星球大战原力觉醒》中国首映盛典红毯</p>
                            <p class="num">阅读（3406） 评论  <i class="good"></i>赞（167） 分类：星球大战</p>
                        </div>
                        <img src="./images/hots_2.jpg" alt="" class="fr" style="width: 150px">
                    </li>
                </ul>
            </div>
            <div class="foot" style="margin: 20px 0;color: #9999a3;font-size: 12px;">
                <p>&copy;2016XIU主题演示 本站主题由themebetter提供</p>
            </div>
        </div>
        <div class="main-right fl">
            <div class="main-right-search" style="padding: 10px;">
                <h3>搜索</h3>
                <div class="search clearfix">
                    <input type="text" class="input-text" placeholder="请输入关键字" style="width: 160px">
                    <div class="btn">搜索</div>
                </div>
            </div>
            <div class="main-right-recommend" style="margin-top: 20px;padding: 10px;">
                <h3>随机推荐</h3>
                <ul class="img-text-list">
                    <li class="clearfix">
                        <div class="text fl">
                            <p class="desc">废灯泡的14种玩法 妹子见了都会心动</p>
                            <p class="num">阅读（819）</p>
                        </div>
                        <img src="./images/widget_1.jpg" alt="" class="fr">
                    </li>
                    <li class="clearfix">
                        <div class="text fl">
                            <p class="desc">废灯泡的14种玩法 妹子见了都会心动</p>
                            <p class="num">阅读（819）</p>
                        </div>
                        <img src="./images/widget_2.jpg" alt="" class="fr">
                    </li>
                    <li class="clearfix">
                        <div class="text fl">
                            <p class="desc">废灯泡的14种玩法 妹子见了都会心动</p>
                            <p class="num">阅读（819）</p>
                        </div>
                        <img src="./images/widget_3.jpg" alt="" class="fr">
                    </li>
                    <li class="clearfix">
                        <div class="text fl">
                            <p class="desc">废灯泡的14种玩法 妹子见了都会心动</p>
                            <p class="num">阅读（819）</p>
                        </div>
                        <img src="./images/widget_4.jpg" alt="" class="fr">
                    </li>
                    <li class="clearfix">
                        <div class="text fl">
                            <p class="desc">废灯泡的14种玩法 妹子见了都会心动</p>
                            <p class="num">阅读（819）</p>
                        </div>
                        <img src="./images/widget_5.jpg" alt="" class="fr">
                    </li>
                </ul>
            </div>
            <div class="main-right-comment" style="margin-top: 20px;padding: 10px;">
                <h3>最新评论</h3>
                <ul class="img-text-list">
                    <li class="clearfix">
                        <img src="./images/avatar_1.jpg" alt="" class="fl" style="border-radius: 50%; width: 25%">
                        <div class="text fr">
                            <p class="desc">废灯泡的14种玩法 妹子见了都会心动</p>
                            <p class="num">阅读（819）</p>
                        </div>
                    </li>
                    <li class="clearfix">
                        <img src="./images/avatar_1.jpg" alt="" class="fl" style="border-radius: 50%; width: 25%">
                        <div class="text fr">
                            <p class="desc">废灯泡的14种玩法 妹子见了都会心动</p>
                            <p class="num">阅读（819）</p>
                        </div>
                    </li>
                    <li class="clearfix">
                        <img src="./images/avatar_2.jpg" alt="" class="fl" style="border-radius: 50%; width: 25%">
                        <div class="text fr">
                            <p class="desc">废灯泡的14种玩法 妹子见了都会心动</p>
                            <p class="num">阅读（819）</p>
                        </div>
                    </li>
                    <li class="clearfix">
                        <img src="./images/avatar_1.jpg" alt="" class="fl" style="border-radius: 50%; width: 25%">
                        <div class="text fr">
                            <p class="desc">废灯泡的14种玩法 妹子见了都会心动</p>
                            <p class="num">阅读（819）</p>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</body>
</html>
<script type="text/javascript" src="./js/jquery.js"></script>
<script type="text/javascript" src="./js/slider.js"></script>